<script lang="ts">
export default {
    name: 'tabOne'
};
</script>

<script setup lang="ts">

const props = defineProps({
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { formData } = props
const emit = defineEmits(['changeTab'])
const dataFormRef = ref(ElForm);

const options = ref<any>([])
const brandList = ref<any>([])
const rules = {
    mobile: [
        {
            required: true,
            message: '手机号码非法',
            trigger: 'blur',
            pattern: /^1\d{10}$/
        }
    ],
    nickName: [{ required: true, message: '请输入账号昵称', trigger: 'blur' }],
    email: [
        {
            required: true,
            message: '请输入联系邮箱',
            trigger: 'blur',
            pattern: /^\w+@\w+\.[a-z]+$/i
        }
    ]
}

const handleChange = (value: any) => {
    console.log(value)
}

/**
 * 表单提交
 */
function handleSubmit() {
    dataFormRef.value.validate((valid: any) => {
        if (valid) {
            emit('changeTab', 1)
        }
    });
}


onMounted(() => {

});
</script>

<template>
    <div class="tab-content">
        <el-form class="form-innner" ref="dataFormRef" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="商品分类" prop="name">
                <el-cascader v-model="formData.value" :options="options" @change="handleChange" />
            </el-form-item>
            <el-form-item label="商品名称" prop="productType">
                <el-input v-model.number="formData.productType" type="number" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="副标题" prop="metadata">
                <el-input v-model="formData.metadata" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="商品品牌" prop="driverId">
                <el-select v-model="formData.driverId" placeholder="请选择">
                    <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍" prop="description">
                <el-input v-model="formData.description" type="textarea" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="商品货号" prop="protocolPluginId">
                <el-input v-model="formData.protocolPluginId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="商品售价" prop="protocolAuthenticationConfig">
                <el-input-number v-model="formData.num" />元
            </el-form-item>
            <el-form-item label="市场价" prop="protocolAuthenticationConfig">
                <el-input-number v-model="formData.num" />元
            </el-form-item>
            <el-form-item label="商品库存" prop="protocolTransport">
                <el-input-number v-model="formData.num" />
            </el-form-item>
            <el-form-item label="计量单位" prop="protocolPluginId">
                <el-input v-model="formData.protocolPluginId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="商品重量" prop="protocolTransport">
                <el-input-number v-model="formData.num" />克
            </el-form-item>
            <el-form-item label="排序" prop="protocolTransport">
                <el-input-number v-model="formData.num" />
            </el-form-item>
            <div class="bottom-box">
                <el-button type="primary" @click="handleSubmit">下一步</el-button>
            </div>
        </el-form>
    </div>
</template>

<style scoped>
.tab-content {
    width: 100%;
}
</style>

